<template>
  <el-container class="all">
    <el-header><Header /></el-header>
    <el-main>
      <div style="margin-top:20px">
        <el-card>
          <div slot="header" class="slotHeader">
            <div>发布提问</div>
            <div><el-switch
              v-model="isRealName"
              class="isRealName"
              active-text="实名"
              inactive-text="匿名"
            /></div>
          </div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-input v-model="form.name" placeholder="问题标题,5~25个字以内,必填" />
            <div class="example">
              <span>举例:</span>
              <ul>
                <li><el-link>大二学生</el-link>,无法和室友相处,<el-link>很容易受影响</el-link>怎么办?</li>
                <li><el-link>情绪低落</el-link>,很丧,怎么确认我是否患有抑郁症呢?<el-link>三个月</el-link>了</li>
              </ul>
            </div>
            <!-- 问题描述 -->
            <el-input
              v-model="textarea"
              type="textarea"
              :rows="10"
              :placeholder="textareaPlaceHolder"
            />
            <div style="margin-top:20px">
              <el-link>选择1-3个问题标签（必选）</el-link>
              <div>
                <ul>
                  <li v-for="ptag in ptagList" id="tag_xw" :key="ptag.id" class="p_tags" :class="currentIndex === ptag.id ? 'visit' : ''" @click="visit(ptag.id, ptag.name)">{{ ptag.name }}</li>
                </ul>
              </div>
            </div>
            <div class="tag">
              <ul>
                <li
                  v-for="(subTag, i) in subTagList"
                  :key="subTag.id"
                  :class="`${sub_selectIndex.indexOf(subTag.id) === -1 ? '' : 'active'}${currentIndex === subTag.ptagId ? '' : 'hide'}`"
                  class="sub_tags"
                  @click="active(subTag.id, i)"
                >{{ subTag.name }}</li>
              </ul>
            </div>
            <p class="click">点击一次选中,再点一次取消</p>
            <el-button class="dispatch" type="primary" @click="postQuestions">发布提问</el-button>
          </el-form>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from '../header/index.vue'
import { getTag1List, getSubTagList } from '@/api/tag'
import { postQuestions } from '@/api/question'
import Swal from 'sweetalert2'
export default {
  components: { Header },
  data() {
    return {
      isRealName: true,
      textarea: '',
      textareaPlaceHolder: '描述问题(40个字~400字以内，必填】 \n' +
        '建议：\n' +
        '【年龄性别】\n' +
        '【大致经过】\n' +
        '【内心感受】\n' +
        '【经历多长时间】\n' +
        '回答者们才能给出相对准确的解答和建议\n' +
        '收到满意的回答后，也记得给回答者点赞哦…',
      currentIndex: '',
      currentIndex_name: '',
      sub_currentIndex: '',
      sub_selectIndex: [],
      ptagList: [],
      subTagList: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  mounted() {
    this.getPtagList()
    setTimeout(() => {
      console.log(this.ptagList)
      this.currentIndex = this.ptagList[0].id
      this.getAllSubTagList()
    }, 500)
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    visit(index, name) {
      if (this.currentIndex !== index) {
        this.sub_selectIndex = []
      }
      this.currentIndex = index
      this.currentIndex_name = name
    },
    active(id, index) {
      if (this.sub_selectIndex.length < 3) {
        if (this.sub_selectIndex.indexOf(id) === -1) {
          this.sub_currentIndex = id
          this.sub_selectIndex.push(id)
        } else {
          this.sub_selectIndex.splice(this.sub_selectIndex.indexOf(id), 1)
        }
      } else {
        if (this.sub_selectIndex.indexOf(id) !== -1) {
          this.sub_selectIndex.splice(this.sub_selectIndex.indexOf(id), 1)
        }
      }
    },
    getPtagList() {
      getTag1List({ tagName: null }).then(res => {
        this.ptagList = res.data
      })
    },
    getAllSubTagList() {
      getSubTagList().then(res => {
        this.subTagList = res.data
      })
    },
    postQuestions() {
      var str = ''
      for (var i = 0; i < this.sub_selectIndex.length; i++) {
        str += this.sub_selectIndex[i] + ','
      }
      if (this.form.name === '' || this.textarea === '' || this.currentIndex === '' || str === '') {
        Swal.fire({
          title: '无法提交',
          text: '还有需要填写的内容没有填写',
          icon: 'info',
          heightAuto: false
        })
        return
      }
      str = str.substring(0, str.length - 1)
      postQuestions({ title: this.form.name, content: this.textarea, ptagId: this.currentIndex,
        ptagName: this.currentIndex_name, subTagIds: str,
        userId: this.$store.state.user.id, isRealName: this.isRealName ? 0 : 1 }).then(res => {
        this.$message({
          message: '提问发布成功',
          type: 'success'
        })
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.all{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.el-header {
  padding:0;
  margin:0;
}
.el-card{
  width:70%;
  margin-left: 20px;
}
.slotHeader{
  display: flex;
  justify-content: flex-start;
}
.isRealName{
  margin-left: 40px;
}
.example{
  margin-top: 10px;
}
.example li{
  font: 14px/1.5 tahoma,arial,sans-serif;
}
.el-main{
  background-color: #f0f2f5;
}
.p_tags{
  display: inline-block;
  width: 88px;
  height: 38px;
  margin-right: 15px;
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  color: #666;
  background-color: #f3f4f5;
  border-radius: 8px;
  margin-bottom: 20px;
  cursor: pointer;
}
.visit {
  color: #fff;
  background-color: #0b8bff;
}
.sub_tags{
  margin-top: 22px;
  display: inline-block;
  width: 74px;
  height: 22px;
  text-align: center;
  line-height: 22px;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  font-size: 14px;
  color: #999;
  margin-right: 15px;
  cursor: pointer;
}
.active{
  color: #0b8bff;
  border: 1px solid #0b8bff;
}
.hide{
  display: none;
}
.tag {
  padding: 0 20px;
  width: 720px;
  background-color: #f9f9fa;
  border-radius: 4px;
  position: relative;
  margin-top: 5px;
  padding-bottom: 20px;
}
.click{
  margin-top: 20px;
  margin-bottom: 50px;
  color: #999;
  font-size: 14px;
  line-height: 14px;
}
.dispatch{
  margin: 0 auto;
  text-align: center;
  line-height: 22px;
  height: 42px;
  width: 760px;
  background-color: #0b8bff;
  /* border-radius: 8px; */
  font-size: 16px;
  color: #fff;
}
</style>
